<template>
  <detailbox title="查看"  @leftclick="close">
    <div slot="right" class="flex_item flex_between">
      <div class="warn_f gosign f12" v-if="detail.processStatus == 0 && detail.createUser == userInfo.user_id">请前往APP端，进行签名操作</div>
      <div v-else-if="detail.processStatus == 6 || detail.processStatus == 4" class="error error_f f12 ml10 p5">
        <i class="f14 el-icon-error"></i>
       审核未通过: <span class="ml30">{{ checkItem.type==1?'审核人:':checkItem.type==3?'记录责任人:':checkItem.type==4?'批准人:':'' }}  {{checkItem.createUserName}}</span> <span class="ml30">未通过原因: {{checkItem.content}}</span>  
      </div>
      <div v-else></div>
      <div class="">
        <el-button type="primary" size="small" plain @click="openDialg('print')">打印</el-button>
        <el-button type="primary" size="small" plain @click="openDialg('showhistory')">审批历史详情</el-button>
      </div>
    </div>
    <el-row class="mt10">
      <el-col :span="12">
        <basic-container>
          <div class="main_title success_f"><b>管理信息</b></div>
          <el-divider></el-divider>
          <div class="mb20">
            <span class="index_num success_bg">1</span>
            <b class="f14">基础信息</b>
          </div>
          <procss-work :item="detail"></procss-work>
          <work-file :detail="detail"></work-file>
        </basic-container>
      </el-col>
      <el-col :span="12"><process-record :guifanFilesProcessRecordList="guifanFilesProcessRecordList" :shenheNum="shenheNum"></process-record></el-col>
    </el-row>
    <steps ref="steps"></steps>
    <showhistory ref="showhistory" type="1" :guifanFilesProcessRecordList="guifanFilesProcessRecordList"></showhistory>
    <work-print ref="print" :detail="detail"></work-print>
  </detailbox>
</template>

<script>
import { getguifanDetail } from '@/api/myapi/tixiwenjian';
import procssWork from './procss-work.vue';
export default {
  props: {
    detailId: ''
  },
  components: {
    procssWork
  },
  data() {
    return {
      system: 'purchasereleaseprocess',
      radio: '',
      checked: false,
      showpreview: false,
      tableData: [],
      useTemp: false,
      form: {},
      options: [],
      guifanFilesProcessRecordList: [],
      detail: {},
      shenheNum: 0
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    close() {
      this.$emit('close');
    },
    getDetail() {
      getguifanDetail(
        {
          id: this.detailId
        },
        this.system
      ).then(({ data }) => {
        if (data.success) {
          this.detail = data.data;
          this.shenheNum = data.data.processRecordList.length;
          this.guifanFilesProcessRecordList = data.data.processRecordList;
		  this.checkItem = this.guifanFilesProcessRecordList.find(item=>item.checkStatus==2);
        }
      });
    }
  }
};
</script>

<style lang="scss">
.active {
  background-color: #e6f1fc !important;
  color: #126bc9;
}

.gosign {
  line-height: 30px;
  background: #fbf4e0;
  border: 1px solid #f3dea4;
  opacity: 1;
  border-radius: 2px;
  padding: 0 10px;
  margin-left: 30px;
}
</style>
